<template>
	<!-- 秒杀 -->
	<div class="component-item">
		<div class="seckill-div"
			 :style="{'background': item.bgColor, 'border-radius': (item.bgStyle == 'circle') ? '12px' : '0px', 'margin-top': item.pageMargin + 'px'}">
			<div class="seckill-box" :style="{'border-top-left-radius': (item.bgStyle == 'circle') ? '12px' : '0px', 'border-top-right-radius': (item.bgStyle == 'circle') ? '12px' : '0px'}">
				<div class="title">
					<div class="left">
						<image :src="domain + '/static/admin/default/image/spike-icon-002.gif'" mode="aspectFit" style="width: 18px;height: 18px;margin-right: 10rpx;"></image>
						<p>限时秒杀</p>
					</div>
					<div class="right" @click="moreSeckill()" >更多 <uni-icons type="right" size="14"></uni-icons></div>
				</div>
				<div class="seckill-list">
					<div class="seckill-item" v-for="item2 in seckillList" :key="item2.id" @click="navToSeckillDetailPage(item2)">
						<div class="img-box">
							<div class="empty-img-box">
								<image :src="item2.pic" mode="aspectFill" @error="handleImageError($event, item2)"></image>
							</div>
						</div>
						<div class="seckill-title"
							 :style="{'font-size': item.fontSize + 'px', 'color': item.fontColor}"
							 v-if="item.show_title == 1">{{ item2.name }}
						</div>
						<div class="price" v-if="item.show_price == 1">
							<span class="label">抢</span>
							<div class="current-price">
								<span class="currency-symbol">¥</span>
								<span class="price-value">{{ item2.seckill_price }}</span>
							</div>
						</div>
					</div>
	
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "seckill",
		props: {
			item: {
				type: Object,
				default() {
					return {}
				}
			},
			domain: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				seckillList: [],
				seckillHour: 0
			}
		},
		mounted() {
			this.getSeckillList()
		},
		methods: {
			// 秒杀商品详情
			navToSeckillDetailPage(item) {
				uni.navigateTo({
					url: '/pages/seckill/product?id=' + item.id
				})
			},
			// 获取秒杀列表
			async getSeckillList() {
				let res = await this.$api.home.getSeckillList.get()
				this.seckillList = res.data.seckillList
				this.seckillHour = res.data.seckillHour
			},
			// 更多的秒杀商品
			moreSeckill() {
				uni.navigateTo({
					url: `/pages/seckill/index`
				})
			},
			// 处理图标加载错误
			handleIconError() {
				console.log('秒杀图标加载失败，使用默认图标');
				// 可以设置一个默认的base64图标或者使用uni-icons
			},
			// 处理商品图片加载错误
			handleImageError(event, item) {
				console.log('商品图片加载失败:', item.pic);
				// 设置默认图片
				item.pic = '/static/errorImage.jpg';
			}
		}
	}
</script>

<style scoped>
.seckill-div {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    /* 确保在小程序中不会超出屏幕 */
    max-width: 100vw;
    /* 使用calc计算宽度，减去左右的margin */
    width: calc(100% - 20px);
    /* 居中显示 */
    margin-left: 10px;
    margin-right: 10px;
}
.seckill-div .seckill-box {
    padding: 15px;
    background: #fff;
    /* 确保内容不会超出容器 */
    overflow-x: hidden;
    box-sizing: border-box;
}
.seckill-box .title {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
}
.seckill-box .title .left {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.seckill-box .left img {
    width: 18px;
    height: 18px;
    margin-right: 5px;
    border-radius: 50%;
}
.seckill-box .left p {
    font-size: 16px;
    color: #282828;
    font-weight: 600;
}
.seckill-box .left .time {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: 5px;
    color: #f44;
}
.seckill-box .left .time span {
    width: 20px;
    height: 16px;
    font-size: 12px;
    text-align: center;
    line-height: 16px;
}
.seckill-box  .left .time em {
    font-size: 12px;
    margin: 0 3px;
    font-style: normal;
    font-weight: 700;
}
.seckill-box .right {
    font-size: 14px;
    color: #999;
}
.seckill-box .seckill-list {
    display: flex;
    margin-top: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 5px; /* 为滚动条留出空间 */
    -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
    /* 修复小程序端滚动问题 */
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
    /* 移除左右内边距，因为父容器已经有padding了 */
}
.seckill-list .seckill-item {
    flex-shrink: 0;
    width: 30%; /* 调整宽度计算 */
    background-color: #fff;
    margin-right: 20px; /* 增加商品间距 */
    /* 小程序端适配 */
    box-sizing: border-box;
    display: inline-block;
    /* 确保内容不会超出 */
    overflow: hidden;
}
.seckill-list .seckill-item:last-child {
    margin-right: 0;
}
/* 隐藏滚动条但保持滚动功能 */
.seckill-list::-webkit-scrollbar {
    display: none;
}
.seckill-list {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.seckill-item .img-box {
    position: relative;
    width: 100%;
    height: 110px;
}
.seckill-item .seckill-title {
    margin-top: 5px;
    font-size: 13px;
    color: #282828;
    padding: 0 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.seckill-item .price {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 3px;
}
.seckill-item .price .label {
    font-size: 9px;
    width: 16px;
    height: 16px;
    background: #e93323;
    color: #fff;
    text-align: center;
    line-height: 16px;
    border-radius: 2px;
}
.seckill-item .price .current-price {
    display: flex;
    align-items: baseline;
}
.seckill-item .price .currency-symbol {
    font-size: 12px;
    font-weight: normal;
    color: #e93323;
    margin-right: 2px;
}
.seckill-item .price .price-value {
    font-size: 14px;
    font-weight: bold;
    color: #e93323;
}
.img-box image {
	width: 100%;
	height: 100%;
	display: block;
	max-width: 100%;
	object-fit: cover;
	background-color: #f5f5f5;
}

.empty-img-box {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 小程序端特殊样式 */
/* #ifdef MP-WEIXIN */
.seckill-box .title .left image {
    width: 18px;
    height: 18px;
    margin-right: 5px;
    border-radius: 50%;
}
/* #endif */
</style>